<template>
	<div>
	   <div style="padding-bottom: 50px;">
		<div class="index-top">
			<el-row type="flex" class="row-bg" justify="space-around">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<div class="left"><i class="icon iconfont icon-kehu"></i></div>
						<div class="right1">
							 <p class="title">新增客户数</p>
							今日{{xzke}}个
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<div class="left left1"><i class="icon iconfont icon-huifangline"></i></div>
						<div class="right1"><p class="title">回访客户数</p>
							{{hfke}}个
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<div class="left left2"><i  class="icon iconfont icon-daofangguanli"></i></div>
						<div class="right1"><p class="title">到访客户数</p>
							{{dfke}}个
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<div class="left left3"><i class="icon iconfont icon-chengjiao"></i></div>
						<div class="right1"><p class="title">成交客户数</p>
							{{cjke}}个
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		
		<div class="i-eachrt" style="margin-top: 60px;">
	    	<el-row type="flex" class="row-bg" justify="space-around">
		        <el-col :span="17">
		            <div class="contens"><div id="myChart" :style="{width: '100%', height: '650px'}"></div></div>
		        </el-col>
		        <el-col :span="7">
		            <div class="contens"><div id="myChart1" :style="{width: '100%', height: '300px'}"></div></div>
		            <div class="contens"><div id="myChart2" :style="{width: '100%', height: '300px'}"></div></div>
		        </el-col>
		    </el-row>
	   </div>
	   </div>
	</div>
</template>

<script>
	import api from "../../kits/api.js"
	export default {
		name: "index",
		data(){
			return{
				xzke:"",//新增客户
				hfke:"",//回访客户数
				dfke:"",//到访客户数
				cjke:"",//成交客户数
				xmcj:{},//项目成交柱状占比图
				kezb:{},//客户占比
				xmzb:{},//项目成交饼状占比图
			}
		},
		created(){
			this.$nextTick(function(){
				var hei = $(".hello").height()-280
				$("#myChart").css("height",hei)
				$("#myChart1").css("height",hei/2-25)
				$("#myChart2").css("height",hei/2-25)
			})
		},
		mounted(){
			this.getpchome();
		},
		methods: {
           //获取首页数据
           getpchome(){
           		this.$axios.get(api.getpchome).then((res)=>{
           			if(res.data.isOK) {
						var data = res.data.data
						this.xzke = data.NewCustS
						this.hfke = data.SVisitS
						this.dfke = data.CVisitS
						this.cjke = data.TransS
						this.xmcj = data.ProjectTrans
						this.kezb = data.ProjectCustomer.Data
						this.xmzb = data.ProjectTransPie.Data
						this.drawLine();
						this.drawCir();
						this.drawCir1()
//						for(var i = 0;i<this.xmcj.length;i++){
//							
//						}
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.fenpei = false;
							this.$message.error(res.data.msg);
						}
					}
           		})
           },
		    drawLine(){
		    	var proName = []
		    	var proNum = []
		    	for(var i = 0;i<this.xmcj.Data.length;i++){
					proName.push(this.xmcj.Data[i].Name)	
					proNum.push(this.xmcj.Data[i].Value)	
				}
		        let myChart = this.$echarts.init(document.getElementById('myChart'));

		        myChart.setOption({
		            title: { text: '项目成交柱状图',
		            		x:"center"
		            },
		            tooltip: {},
		            xAxis: {
		                data: proName
		            },
		            yAxis: {
		            	min:0,
                		max:4,
		            },
		            color: ['#00b5fd', '#009afe', '#00eefb', '#f47a52', '#f58253', '#00aafb', '#00c3fa', '#00bbf8', '#0097fd', '#4ce4f9', '#0a9ff1', '#00adfc', '#00bffa'],
		            series: [{
		                name: '成交量'+this.xmcj.Total,
		                type: 'bar',
		                data: proNum,
		                barWidth : 30,//柱图宽度
		            }]
		        });
		    },
		    drawCir(){
		    	var khName = []
		    	for(var i = 0;i<this.kezb.length;i++){
					khName.push({
						name:this.kezb[i].Name,
						value:this.kezb[i].Value	
					})
					
				}
		        // 基于准备好的dom，初始化echarts实例
		        let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
		        // 绘制图表
		        myChart1.setOption({
		            title : {
				        text: '项目客户占比饼图',
				        subtext: '',
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
//				        orient: 'vertical',
//				        left: 'left',
//				        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				    },
				    color: ['#f37050', '#00b5fd', '#009afe', '#00eefb', '#f47a52', '#f58253', '#00aafb', '#00c3fa', '#00bbf8', '#0097fd', '#4ce4f9', '#0a9ff1', '#00adfc', '#00bffa'],
				    series : [
				        {
				            name: '',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:khName,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
		        });
		    },
		    drawCir1(){
		    	var khName = []
		    	for(var i = 0;i<this.xmzb.length;i++){
					khName.push({
						name:this.xmzb[i].Name,
						value:this.xmzb[i].Value	
					})
					
				}
		    	
		        // 基于准备好的dom，初始化echarts实例
		        let myChart1 = this.$echarts.init(document.getElementById('myChart2'))
		        // 绘制图表
		        myChart1.setOption({
		            title : {
				        text: '项目成交占比饼图',
				        subtext: '',
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
//				        orient: 'vertical',
//				        left: 'left',
//				        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				    },
				    color: ['#f37050', '#00b5fd', '#009afe', '#00eefb', '#f47a52', '#f58253', '#00aafb', '#00c3fa', '#00bbf8', '#0097fd', '#4ce4f9', '#0a9ff1', '#00adfc', '#00bffa'],
				    series : [
				        {
				            name: '',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:khName,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
		        });
		    }
			
		}
	}
</script>
<style>
	.title1 {
		width: 100%;
		padding: 15px 0;
		background: #fff;
		text-indent: 20px;
		border-bottom: 1px solid #dddee1;
	}
	
	.title1 span {
		margin-right: 10px;
	}
	
	.title1 .h1 {
		font-size: 16px;
		font-weight: 600;
	}
	
	.title1 .h2 {
		font-size: 14px;
	}
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
		margin-right: 10px;
	}
	
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.bg-purple {
		background: #d3dce6;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.grid-content {
		border-radius: 4px;
		height: 100%;
	}
	.index-top .el-col .bg-purple{
		background: #fff;
		border-radius: 5px;
	}
	.row-bg {
		
	}
	
	.i-row .conten{
		padding: 25px 0;
		background: skyblue;
	}
	
	.i-eachrt{
		margin-top: 15px;
	}
	.index-top .el-col{
		height: 80px;
		
	}
	.index-top .el-col .left{
		width: 30%;
		float: left;
		text-align: center;
		line-height: 80px;
		font-size: 36px;
		background: #564aa3;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.index-top .el-col .left1{
		background: #2f80e7;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.index-top .el-col .left2{
		background: #2b957a;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.index-top .el-col .left3{
		background: #67C23A;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.index-top .el-col .left .iconfont{
		font-size: 36px;
		color: #fff;
	}
	.right1{
		width: 70%;
		float: right;
		box-sizing: border-box;
		padding-left: 10px;
		padding-top: 5px;
		font-size: 14px;
	}
	.right1 .title{
		font-size: 24px;
		color: #000;
		margin-bottom: 10px;
	}
	.contens{
		border: 1px solid #cfdbe2;
		border-top-width: 3px;
		background: #fff;
		border-radius: 5px;
		box-sizing: border-box;
		padding-top: 20px;
		padding-left: 15px;
		margin-bottom: 25px;
	}
</style>